import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import { DndPanel, SelectionSelect, Control, RectResize } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import { useEffect, useRef, useState } from 'react';
import { Table, Tag, Button, Tabs, Row, Col, Input, Form, Select, TreeSelect, Cascader, DatePicker, InputNumber, Switch, Checkbox ,Radio, Slider, Modal, message, Tooltip} from 'antd';
import { EditOutlined } from '@ant-design/icons';
import html2canvas from "html2canvas";
import styles from './index.less';
import Setting1 from "./component/Setting1";
import Setting2 from "./component/Setting2";
import Setting3 from "./component/Setting3";
const { TabPane } = Tabs;

class CustomNode extends RectResize.view {
  /**
   * 此方法替代自定义节点的getShape方法。
   */
   getResizeShape() {
    const { model } = this.props;
    const { x, y, width, height, radius, properties } = model;
    const style = model.getNodeStyle();
    return h("g", {}, [
      h("rect", {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height,
      }),
    ]);
  }
}
class CustomNodeModel extends RectResize.model {
  initNodeData(data) {
    super.initNodeData(data);
    this.width = 100;
    this.height = 40;
    this.maxWidth = 300;
    this.maxHeight = 300;
    this.text.draggable = true;
  }
  getNodeStyle() {
    const style = super.getNodeStyle();
    style.strokeWidth = 1;
    if (this.isSelected) {
      style.stroke = "red";
      style.strokeWidth = 2;
    }
    return style;
  }
  getResizeOutlineStyle() {
    const style = super.getResizeOutlineStyle();
    style.stroke = "transparent";
    return style;
  }
  getControlPointStyle() {
    return {
      width: 7,
      height: 7,
      fill: "#FFFFFF",
      stroke: "#000000",
    };
  }
  
}

LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
LogicFlow.use(Control);
const SettingPage = (props) => {
  const [data, setData] = useState([]);
  const [activeKey, setActiveKey] = useState('3')
  const [logicflow, setLogicflow] = useState(null)
  const refContainer = useRef();
  const [userEdit, setUserEdit] = useState(false)
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false);
  const [userinfo, setUserinfo] = useState({
    name: '刘玥',
    password: '88888888',
    signName: '久在樊笼中，复得返自然',
    email: '18234253424@163.com',
    phone: '18234253424',
    time: '2019-4-18',
    profession: '前端开发工程师',
    level: 'T6'
  })
  const [editObj, setEditObj] = useState({
    weight: '1',
    needConfirm: '1',
    endTime: '1',
    tx: '周期开始前第 1、2、3 个工作日 和 周期开始后第 1、2、3 个工作日 10:30 (GMT+08:00)',
    read: '周期开始后第 4、5、6 个工作日 10:30 (GMT+08:00)'
  })
  const [editObj2, setEditObj2] = useState({
    follow: ['OKR进展','OKR风险逾期','OKR评价'],
    update: '1',
    endTime: '1',
    tx: '40',
    read: '1',
    tx2: '周期截止日期前一周 10:30 (GMT+08:00)'
  })
  const [editObj3, setEditObj3] = useState({
    follow: ['打分','筛选风险因素'],
    update: '1',
    score: '周期结束前第 1、2、3 个工作日 和 周期结束后第 1、2、3 个工作日 10:30 (GMT+08:00)',
    tx: '周期结束后第 4、5、6 个工作日 10:30 (GMT+08:00)',
    risk: '1',
    tx2: '每日计算逾期概率，超过风险阈值则提醒'
  })
  const [open, setOpen] = useState(false)
  const [menuOptions, setMenuOptions] = useState([
    {label: '看板', value: '1'},
    {label: '工作台', value: '2'},
    {label: 'OKR', value: '3'},
    {label: '项目管理', value: '4'},
    {label: '关联', value: '5'},
    {label: '待办', value: '6'},
    {label: '消息中心', value: '7'},
    {label: '设置', value: '8'},
  ])
  const [roleOptions, setRoleOptions] = useState([
    {label: '开放关注', value: '1'},
    {label: '开放评价', value: '2'},
    {label: '开放查看', value: '3'},
    {label: '开放点赞', value: '4'},
    {label: '开放复盘', value: '5'},
  ])

  const [userInfo, setUserInfo] = useState({})
  const cacheUserList = localStorage.getItem('rolelist')
  // const cacheUserList = ''

  const [userList, setUserList] = useState( cacheUserList ? JSON.parse(cacheUserList) :
    [
      {
        key: '1',
        name: '王伟',
        status: 1,
        dept: '基本档',
        role: '系统管理员',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      },
      {
        key: '2',
        name: '曹耀伟',
        status: 2,
        dept: '基本档',
        role: '系统管理员',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      },
      {
        key: '3',
        name: '刘玥',
        status: 1,
        dept: '基本档',
        role: '用户角色',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      },
      {
        key: '4',
        name: '谭彤彤',
        status: 1,
        dept: '基本档',
        role: '用户角色',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      },
      {
        key: '5',
        name: '张阳阳',
        status: 1,
        dept: '基本档',
        role: '用户角色',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      },
      {
        key: '6',
        name: '徐莹',
        status: 1,
        dept: '基本档',
        role: '用户角色',
        menuList: ['1','2','3','4','5','6','7','8'],
        roleList: ['1', '2','3','4','5']
      }
    ]
  )

  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '所属部门',
      dataIndex: 'dept',
      key: 'dept',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>
          {text}
         </div>)
    },
    {
      title: '所属角色',
      dataIndex: 'role',
      key: 'role',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>
           {text}
         </div>)
    },
    {
      title: '账户状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>
           <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={text == '1'} onChange={(e)=>changeSwitch(e, record.key)} />
         </div>)
    },
    {
      title: '菜单权限',
      dataIndex: 'menuList',
      key: 'menuList',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>
           <Checkbox.Group options={menuOptions} value={text} onChange={(e) => onChangeMenu(e, record.key)} />
         </div>)
    },
    {
      title: '功能权限',
      dataIndex: 'roleList',
      key: 'roleList',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>
           <Checkbox.Group options={roleOptions} value={text} onChange={(e) => onChangeRole(e, record.key)} />
         </div>)
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '400' }}>
        <Button type='primary' onClick={()=>{editUser(record) }}>保存</Button>
         </div>)
    },
  ];
  const [val, setVal] = useState(40)
  const htmlRef = useRef()
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [batchMenu, setBatchMenu] = useState(['1','2','3','4']);
  const [batchRole, setBatchRole] = useState(['1','2','3','4','5']);

  const options = [
    {
      label: '支撑',
      value: '1',
    },
    {
      label: '协作',
      value: '2',
    },
    {
      label: '依赖',
      value: '3',
    },
  ];

  useEffect(()=>{
    if(activeKey == '3') {
      const logicflow = new LogicFlow({
        container: refContainer.current,
        grid: true,
        width: 1150,
        height: 650,
      });
      logicflow.extension.dndPanel.setPatternItems([
        {
          label: '选区',
          icon: '',
          callback: () => {
            logicflow.extension.selectionSelect.openSelectionSelect();
            logicflow.once('selection:selected', () => {
              logicflow.extension.selectionSelect.closeSelectionSelect();
            });
          }
        },{
          type: 'circle',
          text: '开始',
          label: '开始节点',
          icon: '',},{
          type: 'rect',
          label: '用户任务',
          icon: '',
          className: 'important-node'
        },
        {
          type: 'rect',
          label: '系统任务',
          icon: '',
          className: 'import_icon'
        },
        {
          type: 'diamond',
          label: '条件判断',
          icon: '',
        },
        {
          type: 'circle',
          text: '结束',
          label: '结束节点',
          icon: '',
        }
      ]);
      logicflow.register({
        type: "resizable-rect",
        model: CustomNodeModel,
        view: CustomNode,
      });
      logicflow.render();
      // 初始渲染 默认工作流
      logicflow.renderRawData({
        nodes: [
          {
            id: "1",
            type: "circle",
            x: 200,
            y: 200,
            text: "制定OKR",
          },
          {
            id: "2",
            type: "circle",
            x: 400,
            y: 200,
            text: "上级审批",
          },
          {
            id: "3",
            type: "circle",
            x: 600,
            y: 200,
            text: "执行OKR",
          },
          {
            id: "4",
            type: "circle",
            x: 750,
            y: 250,
            text: "同组打分",
          },
          {
            id: "5",
            type: "circle",
            x: 750,
            y: 380,
            text: "领导打分",
          },
          {
            id: "6",
            type: "circle",
            x: 750,
            y: 100,
            text: "自评分",
          },
          {
            id: "7",
            type: "circle",
            x: 1000,
            y: 200,
            text: "复盘OKR",
          },
          {
            id: "8",
            type: "circle",
            x: 1000,
            y: 350,
            text: "上级审批",
          },
          {
            id: "9",
            type: "circle",
            x: 1000,
            y: 500,
            text: "完结OKR",
          },
        ],
        edges: [
          {
            sourceNodeId: "1",
            targetNodeId: "2",
            type: "polyline",
            text: "提交审批",
          },
          {
            sourceNodeId: "2",
            targetNodeId: "3",
            type: "polyline",
            text: "审批通过",
          },
          {
            sourceNodeId: "3",
            targetNodeId: "4",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "3",
            targetNodeId: "5",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "3",
            targetNodeId: "6",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "4",
            targetNodeId: "7",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "5",
            targetNodeId: "7",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "6",
            targetNodeId: "7",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "7",
            targetNodeId: "8",
            type: "polyline",
            text: "",
          },
          {
            sourceNodeId: "8",
            targetNodeId: "9",
            type: "polyline",
            text: "",
          },
        
        ],
      })
      setLogicflow(logicflow)
    }
    
  }, [])
  const onChangeMenu = (e, key) => {
    const item = userList.filter(val => val.key == key)[0];
    const newItem = Object.assign({}, item, {
      menuList: e,
    })
    const keys = userList.map(val => val.key);
    const index = keys.indexOf(key);
    userList.splice(index, 1, newItem)
    setUserList(JSON.parse(JSON.stringify(userList)))
  }
  const changeSwitch = (e, key) => {
    const item = userList.filter(val => val.key == key)[0];
    const newItem = Object.assign({}, item, {
      status: e ? 1 : 2,
    })
    const keys = userList.map(val => val.key);
    const index = keys.indexOf(key);
    userList.splice(index, 1, newItem)
    setUserList(JSON.parse(JSON.stringify(userList)))
  }
  const onChangeRole = (e, key) => {
    const item = userList.filter(val => val.key == key)[0];
    const newItem = Object.assign({}, item, { roleList: e, })
    const keys = userList.map(val => val.key);
    const index = keys.indexOf(key);
    userList.splice(index, 1, newItem)
    setUserList(JSON.parse(JSON.stringify(userList)))
  }
  // 保存当前工作流节点至服务端
  const saveData = async (tip = '', url = '') => {
    let data = logicflow.getGraphData();
    let params = { data, url, }
    let res = await saveFlowNodes(params);
    if(res.code == 10000) { message.success('提交成功') } else { message.error(res.msg)}
  }
  //调用函数获取到img的data数据
  const renderImg = () => {
    html2canvas(refContainer.current,{ useCORS: true, allowTaint:true, backgroundColor: null, scale: 2, dpi: 300,}).then((canvas)=>{
      const result = canvas.toDataURL()
      var img = document.createElement("img");
      img.src = result;  // base64
      img.style.width = '800px';
      img.style.height = '400px';
      document.body.appendChild(img);
      saveData('2', result)
    })
  }
    // 提交审批
    const submitApproval = () => {
      renderImg()
    }
    const onChange = (key) => {
      setActiveKey(key)
    }
  // 生成图片
  const canvasWrapText = (options) => {
    let settings = {
        canvas:document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
        canvasWidth:480, //canvas的宽度
        drawStartX:10, //绘制字符串起始x坐标
        drawStartY:30, //绘制字符串起始y坐标
        lineHeight:30, //文字的行高
        font:"24px 'Microsoft Yahei'", //文字样式
        text:'<div>hshhshsh</div>', //需要绘制的文本
        drawWidth:460, //文字显示的宽度
        color:"#000000", //文字的颜色
        backgroundColor:"#ffffff", //背景颜色
    };

    //将传入的配置覆盖掉默认配置
    if(!!options && typeof options === "object"){
        for(var i in options){
            settings[i] = options[i];
        }
    }

    //获取2d的上线文开始设置相关属性
    var canvas = settings.canvas;
    canvas.width = settings.canvasWidth;
    var ctx = canvas.getContext("2d");

    //绘制背景色
    ctx.fillStyle = settings.backgroundColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    //绘制文字
    ctx.font = settings.font;
    ctx.fillStyle = settings.color;
    var lineWidth = 0; //当前行的绘制的宽度
    var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
    //由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中
    var arr = [];
    for(var i = 0; i<settings.text.length; i++){
        //获取当前的截取的字符串的宽度
        lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;

        if(lineWidth > settings.drawWidth){
            //判断最后一位是否是标点符号
            if(judgePunctuationMarks(settings.text[i-1])){
                arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
                lastTextIndex = i;
            }else{
                arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));
                lastTextIndex = i-1;
            }
        }
        //将最后多余的一部分添加到数组
        if(i === settings.text.length - 1){
            arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));
        }
    }

    //根据arr的长度设置canvas的高度
    canvas.height = arr.length*settings.lineHeight+settings.drawStartY;

    ctx.font = settings.font;
    ctx.fillStyle = settings.color;
    for(var i =0; i<arr.length; i++){
        ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);
    }

    //判断是否是需要避开的标签符号
    function judgePunctuationMarks(value) {
        var arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];
        for(var i = 0; i< arr.length; i++){
            if(value === arr[i]){
                return true;
            }
        }
        return false;
    }

    return canvas.toDataURL();
  }
const onChangeSider = (newValue) => {
  setVal(newValue);
}
// 基础设置 DOM
const renderBaseSetting = () => {
 return <div style={{padding: '20px 50px'}}>
   <Row gutter={20} style={{marginBottom: '20px'}}>
      <Col span={2}><Button type="primary" onClick={()=>{ setUserEdit(true) }}>保存</Button></Col>
    </Row>
    <div className={styles.SectionCard2}>
    <Row gutter={20} style={{marginBottom: '10px', padding: '10px 0',borderBottom: '1px dotted #4352b6'}}>
       <Col span={6}>OKR对齐设置:</Col>
       <Col span={18}>
         <Checkbox.Group options={options} defaultValue={['1','2','3']} />
       </Col>
    </Row>
    <Row gutter={20} style={{marginBottom: '10px', padding: '10px 0',borderBottom: '1px dotted #4352b6'}}>
       <Col span={6}>OKR进度设置:</Col>
       <Col span={18}>
        <Radio.Group value={1}>
          <Radio value={1}>百分制</Radio>
          <Radio value={2}>百分比</Radio>
          <Radio value={3}>十分制</Radio>
        </Radio.Group>
       </Col>
    </Row>
    <Row gutter={20} style={{marginBottom: '10px', padding: '10px 0',borderBottom: '1px dotted #4352b6'}}>
       <Col span={6}>提醒机制设置:</Col>
       <Col span={18}>
          <Row gutter={20} style={{display: 'flex', alignItems: 'center',marginBottom: '15px'}}>
            <Col span={5}>系统提醒</Col>
            <Col span={18}>
              <Select
                defaultValue="1"
                style={{
                  width: 180,
                }}
                options={[
                  {
                    value: '1',
                    label: '每天',
                  },
                  {
                    value: '2',
                    label: '每3天',
                  },
                  {
                    value: '3',
                    label: '一周',
                  },
                  {
                    value: '4',
                    label: '12h',
                    disabled: true,
                  },
                ]}
              />
            </Col>
          </Row>
          <Row gutter={20} style={{display: 'flex', alignItems: 'center',marginBottom: '15px'}}>
            <Col span={5}>短信提醒</Col>
            <Col span={18}>
            <Select
                defaultValue="3"
                style={{
                  width: 180,
                }}
                options={[
                  {
                    value: '1',
                    label: '每天',
                  },
                  {
                    value: '2',
                    label: '每3天',
                  },
                  {
                    value: '3',
                    label: '一周',
                  },
                  {
                    value: '4',
                    label: '12h',
                    disabled: true,
                  },
                ]}
              />
            </Col>
          </Row>
          <Row gutter={20} style={{display: 'flex', alignItems: 'center',marginBottom: '15px'}}>
            <Col span={5}>邮件提醒</Col>
            <Col span={18}>
            <Select
                defaultValue="2"
                style={{
                  width: 180,
                }}
                options={[
                  {
                    value: '1',
                    label: '每天',
                  },
                  {
                    value: '2',
                    label: '每3天',
                  },
                  {
                    value: '3',
                    label: '一周',
                  },
                  {
                    value: '4',
                    label: '12h',
                    disabled: true,
                  },
                ]}
              />
            </Col>
          </Row>
       </Col>
    </Row>
    {/* <Row gutter={20} style={{marginBottom: '10px', padding: '10px 0',borderBottom: '1px dotted #4352b6'}}>
       <Col span={6}>风险阈值设置:</Col>
       <Col span={18}>
         <Row>
            <Col span={12}>
              <Slider
                min={1}
                max={100}
                onChange={onChangeSider}
                value={typeof val === 'number' ? val : 0}
              />
            </Col>
            <Col span={4}>
              <InputNumber
                min={1}
                max={100}
                style={{
                  margin: '0 16px',
                }}
                value={val}
                onChange={onChange}
              />
            </Col>
          </Row>
       </Col>
    </Row> */}
    <Row gutter={20}>
       <Col span={6}>主题颜色设置</Col>
       <Col span={18}>
          <span style={{display: 'block', width:'20px', height: '20px', background: '#4352b6'}}></span>
       </Col>
    </Row>
    </div>
    
 </div>
}
const renderFlow = () => {
  return <>
    <div style={{marginBottom: '20px', padding: '0 20px'}}>
      <Button style={{marginRight:'10px'}} type='primary' onClick={saveData}>保存</Button> 
      <Button onClick={submitApproval}  type='primary'>提交审批</Button> 
    </div>
    <div style={{display: 'flex'}}>
      <div className="flowChart" ref={refContainer}></div>  
      <div id='' style={{marginLeft: '20px',padding: '20px',width: '430px',boxShadow: '0 2px 9px rgb(175 126 228)'}}>
         <Row gutter={10} className={styles.flow_wrap}>
          <Col span={4} className={styles.flow_label}>ID</Col>
          <Col span={18}><Input value='12' /></Col>
         </Row>
         <Row gutter={10} className={styles.flow_wrap}>
          <Col span={4} className={styles.flow_label}>名称</Col>
          <Col span={18}><Input value='审批中' /></Col>
         </Row>
         <Row gutter={10} className={styles.flow_wrap}>
          <Col span={4} className={styles.flow_label}>扩展属性</Col>
          <Col span={18}><Input value='' /></Col>
         </Row>
         <Row gutter={10} className={styles.flow_wrap}>
          <Col span={4} className={styles.flow_label}>其他属性</Col>
          <Col span={18}><Input value='' /></Col>
         </Row>
      </div>
    </div>
  </>
}
const renderStep = () => {
  return (
    <div style={{display: 'flex', background: '#eceef0',padding: '20px'}}>
      <div className={styles.setting_box}>
        <div className={styles.setting_title}>制定阶段设置</div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>基础设置
              <Button type="primary" icon={<EditOutlined />} onClick={()=>{ setVisible(true) }} style={{position: 'absolute',right: '0'}}>
                 编辑
              </Button>
              </div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>选择使用 O 或 KR 权重</span>
                <span className={styles.SectionCard_settingContent}>{editObj.weight == '1' ? '使用' : '不使用'}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>OKR 内容需上级确认(若无直属上级，OKR会自动完成确认)</span>
                <span className={styles.SectionCard_settingContent}><div>{editObj.needConfirm == '1' ? '开启' : '未开启'}</div></span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>OKR 需设置截止日期</span>
                <span className={styles.SectionCard_settingContent}>{editObj.endTime == '1' ? '开启' : '未开启'}</span>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>提醒设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>填写提醒（仅提醒未填写人员）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{ editObj.tx } </span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>查看下级填写情况提醒（仅当有下级未填写时）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{editObj.read}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.setting_box}>
        <div className={styles.setting_title}>跟进阶段设置</div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>跟进方式
              <Button type="primary" icon={<EditOutlined />} onClick={()=>{ setVisible2(true) }} style={{position: 'absolute',right: '0'}}>
                 编辑
              </Button>
              </div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            {editObj2.follow.length > 0 && editObj2.follow.map(item=>(
              <span className={styles.SectionCard_tag}>{item}</span>
            ))}
          </div>
          {editObj2.scorePeople && editObj2.scorePeople.length > 0 && <><div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>打分人员</span>
                <span className={styles.SectionCard_settingContent}>
                {editObj2.scorePeople.length > 0 && editObj2.scorePeople.map(item=>(
                 <span className={styles.SectionCard_tag}>{item}</span>
                ))}
                </span>
              </div>
            </div>
          </div></>}
        </div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>OKR进展设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>更新进展提醒（仅提醒已填 OKR 人员）</span>
                <span className={styles.SectionCard_settingContent}>{editObj2.update == '1' ? '开启' : '未开启'}</span>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>OKR风险逾期设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>风险逾期（仅提醒已填 OKR 人员）</span>
                <span className={styles.SectionCard_settingContent}>{editObj2.endTime == '1' ? '开启' : '未开启'}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>风险阈值</span>
                <span className={styles.SectionCard_settingContent}>{editObj2.tx}</span>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>评价设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>显示所有评价</span>
                <span className={styles.SectionCard_settingContent}>{editObj2.read == '1' ? '开启' : '未开启'}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>评价提醒（仅提醒未评价记录人员）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{editObj2.tx2}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.setting_box}>
        <div className={styles.setting_title}>复盘阶段设置</div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>复盘方式
              <Button type="primary" icon={<EditOutlined />} onClick={()=>{setVisible3(true)}} style={{position: 'absolute',right: '0'}}>
                 编辑
              </Button>
              </div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            {editObj3.follow.length > 0 && editObj3.follow.map(item=>(
              <span className={styles.SectionCard_tag}>{item}</span>
            ))}
          </div>
        </div>
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>打分设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>显示OKR总分</span>
                <span className={styles.SectionCard_settingContent}>{editObj3.update == '1' ? '已开启' : '未开启'}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>打分提醒（仅提醒未打分人员）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{editObj3.score}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>查看下级打分情况提醒（仅当有下级未打分时）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{editObj3.tx}</span>
              </div>
            </div>
          </div>
        </div>
       
        <div className={styles.SectionCard}>
          <div className={styles.SectionCard_header}>
            <div className={styles.SectionCard_headerTitleContent}>
              <div className={styles.SectionCard_title}>风险因素设置</div>
              <div className={styles.SectionCard_desc}></div>
            </div>
          </div>
          <div className={styles.SectionCard_line}></div>
          <div className={styles.SectionCard_body}>
            <div className={styles.SectionCard_groupContainer}>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>显示所有历史风险因素</span>
                <span className={styles.SectionCard_settingContent}>{editObj3.risk == '1' ? '已开启' : '未开启'}</span>
              </div>
              <div className={styles.SectionCard_container}>
                <span className={styles.SectionCard_settingTitle}>评价提醒（仅提醒未评价记录人员）</span>
                <span className={styles.SectionCard_settingContent}>提醒时间：{editObj3.tx3}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
const renderUserSetting = () => {
  return <div style={{padding: '20px 50px'}}>
    <Row gutter={20} style={{marginBottom: '20px'}}>
      <Col span={2}><Button type="primary" onClick={()=>{ setUserEdit(true) }}>编辑</Button></Col>
      <Col span={2}><Button type="primary" onClick={()=>{ setUserEdit(true) }}>保存</Button></Col>
      <Col span={2}><Button type="primary" onClick={()=>{ setUserEdit(false) }}>重置</Button></Col>
    </Row>
    <div className={styles.SectionCard2}>
    <Form
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 14,
      }}
      layout="horizontal"
      initialValues={{
        size: 'default',
      }}
      onValuesChange={onFormLayoutChange}
      size={'default'}
      style={{
        // maxWidth: 600,
      }}
    >
      <Form.Item label="姓名">
        {userEdit ? <Input value={userinfo.name} /> : <span className={styles.r_info}>{userinfo.name}</span>}
      </Form.Item>
      <Form.Item label="密码">
        {userEdit ? <Input type='password' value={userinfo.password} /> : <span className={styles.r_info}>{userinfo.password}</span>}
      </Form.Item>
      <Form.Item label="个性签名">
        {userEdit ? <Input value={userinfo.signName} /> : <span className={styles.r_info}>{userinfo.signName}</span>}
      </Form.Item>
      <Form.Item label="手机号">
        {userEdit ? <Input value={userinfo.phone} /> : <span className={styles.r_info}>{userinfo.phone}</span>}
      </Form.Item>
      <Form.Item label="邮箱">
        {userEdit ? <Input value={userinfo.email} /> : <span className={styles.r_info}>{userinfo.email}</span>}
      </Form.Item>
      <Form.Item label="入职日期">
        {userEdit ? <Input value={userinfo.time} /> : <span className={styles.r_info}>{userinfo.time}</span>}
      </Form.Item>
      <Form.Item label="岗位">
        {userEdit ? <Input value={userinfo.profession} /> : <span className={styles.r_info}>{userinfo.profession}</span>}
      </Form.Item>
      <Form.Item label="职级">
        {userEdit ? <Input value={userinfo.level} /> : <span className={styles.r_info}>{userinfo.level}</span>}
      </Form.Item>
    </Form>
    </div>

  </div>
}
const onFormLayoutChange = () => {

}
const editUser = () => {
  localStorage.setItem('rolelist', JSON.stringify(userList))
  message.success('保存成功')
}
const onSelectChange = (newSelectedRowKeys) => {
  setSelectedRowKeys(newSelectedRowKeys);
}
const saveMenu = () => {
  const item = userList.filter(val => selectedRowKeys.includes(val.key));
  const selectKeys = item.map(val => val.key)
  const list = userList.map(val => {
    let newList = selectKeys.includes(val.key) ? batchMenu : val.menuList
    return Object.assign({}, val, { menuList: newList })
  })
  setUserList(JSON.parse(JSON.stringify(list)))
}
const saveRole = () => {
  const item = userList.filter(val => selectedRowKeys.includes(val.key));
  const selectKeys = item.map(val => val.key)
  const list = userList.map(val => {
    let newList = selectKeys.includes(val.key) ? batchRole : val.roleList
    return Object.assign({}, val, { roleList: newList })
  })
  setUserList(JSON.parse(JSON.stringify(list)))
}
const onChangePatchMenu = (e) => {
  setBatchMenu(e)
  if(selectedRowKeys.length == 0) {
    message.error('请选择数据')
    return;
  }
}
const onChangePatchRole = (e) => {
  setBatchRole(e)
}
const renderPermissionSetting = () => {
  return (
    <div style={{padding: '0px 20px'}}>
      <div style={{marginBottom: '10px'}}>
        <Tooltip placement="bottomLeft" trigger='click' title={(
          <div style={{padding: '10px',background: '#fff'}}>
            <Checkbox.Group options={menuOptions} value={batchMenu} onChange={(e) => onChangePatchMenu(e)} />
            <br></br>
            <Button type="primary" onClick={saveMenu} style={{marginTop: '10px'}}>保存</Button>
          </div>
        )}>
          <Button type="primary" style={{marginRight: '10px'}}>批量设置菜单权限</Button>
        </Tooltip>
        <Tooltip placement="bottomLeft" trigger='click' title={(<div style={{padding: '10px',background: '#fff'}}>
            <Checkbox.Group options={roleOptions} value={batchRole} onChange={(e) => onChangePatchRole(e)} />
            <br></br>
            <Button type="primary" onClick={saveRole} style={{marginTop: '10px'}}>保存</Button>
          </div>)}>
          <Button type="primary">批量设置功能权限</Button>
        </Tooltip>
      </div>
    <Table bordered rowSelection={{
          selectedRowKeys,
          onChange: onSelectChange,
        }} style={{width: '95%'}} dataSource={userList} columns={columns} pagination={null} />
    </div>
  )
}
const renderMessageSetting = () => {

}
const updateObj = (obj) => {
  setEditObj(obj);
  onCloseVisible()
}
const updateObj2 = (obj) => {
  setEditObj2(obj);
  onCloseVisible2()
}
const updateObj3 = (obj) => {
  setEditObj3(obj);
  onCloseVisible3()
}
const onCloseVisible = () => {
  setVisible(false)
}
const onCloseVisible2 = () => {
  setVisible2(false)
}
const onCloseVisible3 = () => {
  setVisible3(false)
}
const handleOk = () => {
  form.validateFields()
        .then((values) => {

        })
        .catch((errinfo) => {
          console.log(errinfo, '--errinof');
        });
}
const handleCancel = () => {
  setOpen(false)
}
  return (
    <div className={styles.tableWrap}>
      <Tabs
        onChange={onChange}
        activeKey={activeKey}
        type="card"
      >
        <TabPane tab='用户设置' key='1'>{renderUserSetting()}</TabPane>
        <TabPane tab='基础设置' key='2'>{renderBaseSetting()}</TabPane>
        <TabPane tab='权限设置' key='5'>{renderPermissionSetting()}</TabPane>
        {/* <TabPane tab='消息设置' key='6'>{renderMessageSetting()}</TabPane> */}
        <TabPane tab='工作流设置' key='3'>{renderFlow()}</TabPane>
        <TabPane tab='阶段设置' key='4'>{renderStep()}</TabPane>
      </Tabs>
      {visible && <Setting1 visible={visible} onCloseVisible={onCloseVisible} editObj={editObj} updateObj={updateObj}></Setting1>}
      {visible2 && <Setting2 visible={visible2} onCloseVisible={onCloseVisible2} editObj={editObj2} updateObj={updateObj2}></Setting2>}
      {visible3 && <Setting3 visible={visible3} onCloseVisible={onCloseVisible3} editObj={editObj3} updateObj={updateObj3}></Setting3>}
      {open && <Modal title="用户" open={open} onOk={handleOk} onCancel={handleCancel}>
      <Form form={form} layout="vertical" className={styles.form_box}>
            <div
                    style={{ position: 'relative', width: '90%' }}
                  >
                    <Form.Item
                      label={`用户名`}
                      name={`name`}
                      initialValue={
                        userInfo[`name`] ? userInfo[`name`] : ''
                      }
                    >
                      <Input></Input>
                    </Form.Item>
                    <Form.Item
                      label={`是否销户`}
                      name={`status`}
                      initialValue={
                        userInfo[`status`] ? userInfo[`status`] : ''
                      }
                    >
                      <Radio.Group>
                        <Radio value={'1'}>是</Radio>
                        <Radio value={'2'}>否</Radio>
                      </Radio.Group>
                    </Form.Item>
            </div>              
          </Form>
        </Modal>}
    </div>
  )
}

export default SettingPage